<template>
	<!-- 走马灯/轮播图 -->
	<h2>最新拼图</h2>
	<el-carousel ref="carousel" type="card" :interval="2000" height="400px">
		<el-carousel-item v-for="(item,index) in JigsawPuzzleArray" :key="index">
			<img width="400" :src="item.imageUrl" @click="toJigsawPuzzleDetails(item.id)" />
		</el-carousel-item>
		<!-- <el-carousel-item>
			<img src="../assets/3.jpg" />
		</el-carousel-item> -->
	</el-carousel>
	61546465456
	<h2>最新获奖</h2>
	<div class="awards">
		<ul v-for="(item,index) in array" :key="index">
			<li>
				<div id="oneGrid" class="home-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
					<!-- src="https://empty" -->
					<el-avatar :size="120" @error="errorHandler">
						<img :src="item.prizeImageUrl" />
					</el-avatar>
					<h4>
						{{item.nickname}}

					</h4>
					<span>{{item.prizeName}}</span>
				</div>
			</li>

		</ul>
	</div>
</template>

<script scoped>
	// import localStorage from '/src/utils/localstorage.js'
	
	export default {
		name: "Home",
		data() {
			return {
				user:{},
				JigsawPuzzleArray:[],
				array: [],
				nickname: '昵称1',
			}
		},
		mounted() {//挂载之后执行的方法
			this.prizeRecord();
			this.getAllJigsawPuzzle();
			// this.getUserInfo();
		},
		methods: {
			//查询所有拼图列表
			getAllJigsawPuzzle(){
				this.$axios.get('/api/jigsaw/puzzle/getAllJigsawPuzzle', {
						params: {
							// id: this.user.id
						}
					})
					.then(data => {
						this.JigsawPuzzleArray = data.list;
						this.$refs.carousel.next();
						// //foreach遍历数组
						// this.carouselList.forEach(function(item,index) {
						// 	// console.log("item="+item);
						// 	console.log("item["+index+"].imagePath=" + item.imagePath)
						// 	//item 就是当日按循环到的对象
						// 	//index是循环的索引，从0开始
						// })
					})
			},
			//查询获奖记录
			prizeRecord() {
				// //获取存储在本地的uid
				// this.user.id = localStorage.getItem("uid");
				this.$axios.post('/api/prize-record/getTheLatestAward', {
						params: {
							// id: this.user.id
						}
					})
					.then(data => {
						// console.log("data="+data)
						this.array = data.list;
						// this.array.forEach(prize in this.array)=>{
						// 	console.log("prize.prizeImageUrl=" + prize.prizeImageUrl)
						// }
						// this.array.forEach(function(item,index) {
						// 	console.log("item["+index+"].prizeImageUrl=" + item.prizeImageUrl)
						// 	//item 就是当日按循环到的对象
						// 	//index是循环的索引，从0开始
						// })
						// console.log("this.array[1].prizeImageUrl=" + this.array[1].prizeImageUrl)
						// console.log("this.array[0].nickname=" + this.array[0].nickname)


					})
			},
			//转到拼图详情页
			toJigsawPuzzleDetails(id){
				//id是拼图列表id
				//进入拼图详情
				this.$router.push({
					path:'/jigsawPuzzleDetails',
					params:{
						id:id
					}
				})
			},
			// jigsawPuzzleList(){//转到拼图列表页
			// 	this.$router.push({
			// 		path:'/jigsawPuzzleList'
			// 	})
			// },
			// signIn(){//转到签到页面
			// 	this.$router.push({
			// 		path: '/signIn'
			// 	});
			// },
		}
	}

</script>

<style type="text/css" scoped>
	ul>li {
		float: left;
		list-style: none;
	}

	.image {
		margin-left: 1000px;
	}

	.home-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 180px;
		height: 200px;
	}

	.awards {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	#oneGrid {
		margin-right: 68px;

	}

	#threeGrid {
		margin-left: 68px;
	}

	.el-menu-demo {
		position: fixed;
		width: 800px;
		z-index: 3;
	}
</style>
